<template>
  <div class="calendar-component">
    <div class="calendar-header">
      <el-button
        size="mini"
        icon="fas fa-chevron-left"
        @click="prevMonth"
      ></el-button>
      <h3>{{ currentMonthText }}</h3>
      <el-button
        size="mini"
        icon="fas fa-chevron-right"
        @click="nextMonth"
      ></el-button>
    </div>

    <!-- 星期标题 -->
    <div class="weekdays">
      <div class="weekday">日</div>
      <div class="weekday">一</div>
      <div class="weekday">二</div>
      <div class="weekday">三</div>
      <div class="weekday">四</div>
      <div class="weekday">五</div>
      <div class="weekday">六</div>
    </div>

    <!-- 日期网格 - 添加了容器以控制溢出 -->
    <div class="calendar-grid-container">
      <div
        class="calendar-grid"
      >
        <div
          v-for="(dateInfo, index) in calendarDays"
          :key="index"
          class="calendar-day"
          :class="{
            'other-month': !dateInfo.isCurrentMonth,
            'today': dateInfo.isToday,
            'selected': dateInfo.date.getTime() === selectedDate.getTime(),
            'has-event': dateInfo.hasEvent
          }"
          @click="handleDateClick(dateInfo.date)"
        >
          <div class="date-number">{{ dateInfo.date.getDate() }}</div>
          <div class="event-indicator" v-if="dateInfo.hasEvent">
            {{ dateInfo.eventCount }} 节抗遗忘
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CalendarComponent',
  props: {
    events: {
      type: Object,
      default: () => ({})
    },
    selectedDate: {
      type: Date,
      default: () => new Date()
    }
  },
  data() {
    return {
      currentDate: new Date()
    }
  },
  computed: {
    // 当前月份文本
    currentMonthText() {
      const year = this.currentDate.getFullYear()
      const month = this.currentDate.getMonth() + 1
      return `${year}年${month}月`
    },
    // 日历天数数据
    calendarDays() {
      const days = []
      const year = this.currentDate.getFullYear()
      const month = this.currentDate.getMonth()

      // 当月第一天
      const firstDay = new Date(year, month, 1)
      // 当月最后一天
      const lastDay = new Date(year, month + 1, 0)

      // 日历开始日期（显示上月的最后几天）
      const startDate = new Date(firstDay)
      startDate.setDate(firstDay.getDate() - firstDay.getDay())

      // 日历结束日期（显示下月的前几天）
      const endDate = new Date(lastDay)
      if (endDate.getDay() < 6) {
        endDate.setDate(endDate.getDate() + (6 - endDate.getDay()))
      }

      // 生成日历天数
      let currentDate = new Date(startDate)
      while (currentDate <= endDate) {
        const dateStr = `${currentDate.getFullYear()}-${currentDate.getMonth() + 1}-${currentDate.getDate()}`
        const hasEvent = this.events[dateStr] > 0
        const isToday = currentDate.toDateString() === new Date().toDateString()
        const isCurrentMonth = currentDate.getMonth() === month

        days.push({
          date: new Date(currentDate),
          hasEvent,
          eventCount: hasEvent ? this.events[dateStr] : 0,
          isToday,
          isCurrentMonth
        })

        currentDate.setDate(currentDate.getDate() + 1)
      }

      return days
    }
  },
  watch: {
    // 当选中日期变化时，调整日历显示的月份
    selectedDate(newVal) {
      this.currentDate = new Date(newVal)
    }
  },
  methods: {
    // 上个月
    prevMonth() {
      this.currentDate.setMonth(this.currentDate.getMonth() - 1)
      this.handleDateClick(this.currentDate)
    },
    // 下个月
    nextMonth() {
      this.currentDate.setMonth(this.currentDate.getMonth() + 1)
      this.handleDateClick(this.currentDate)
    },
    // 点击日期
    handleDateClick(date) {
      this.$emit('date-selected', date)
    }
  }
}
</script>

<style scoped>
.calendar-component {
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(8, 8, 8, 0.15);
  padding: 15px;
  background-color: #fff;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

/* 日历头部 */
.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.calendar-header h3 {
  margin: 0;
  font-size: clamp(14px, 3vw, 16px);
  color: #333;
  font-weight: 500;
}

/* 星期标题 */
.weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 10px;
  width: 100%;
}

.weekday {
  text-align: center;
  font-size: clamp(12px, 2vw, 14px);
  color: #666;
  padding: 8px 0;
}

/* 日历网格容器 - 新增 */
.calendar-grid-container {
  width: 100%;
  overflow-x: auto;
  padding-bottom: 5px; /* 为滚动条预留空间 */
}

/* 日历网格 */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
  min-width: 320px; /* 确保小屏幕下有合理的最小宽度 */
  width: 100%;
}

/* 日历日期 */
.calendar-day {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  padding: 4px;
  cursor: pointer;
  position: relative;
  transition: background-color 0.2s;
}

.calendar-day:hover {
  background-color: #f0f7ff;
}

.calendar-day.other-month {
  opacity: 0.5;
}

.calendar-day.today {
  background-color: #e8f4ff;
}

.calendar-day.selected {
  background-color: #0084ff;
  color: white;
}

.calendar-day.selected .event-indicator {
  color: white;
  background-color: rgba(255, 255, 255, 0.2);
}

.date-number {
  font-size: clamp(12px, 2.5vw, 14px);
  font-weight: 500;
}

/* 事件指示器 */
.event-indicator {
  margin-top: 2px;
  font-size: clamp(8px, 1.5vw, 10px);
  padding: 1px 4px;
  border-radius: 4px;
  background-color: #f0f0f0;
  color: #666;
  white-space: nowrap;
}

.calendar-day.has-event:not(.selected) {
  position: relative;
}

.calendar-day.has-event:not(.selected):after {
  content: '';
  position: absolute;
  bottom: 5px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #0084ff;
}

/* 响应式调整 */
@media (max-width: 480px) {
  .calendar-component {
    padding: 10px 8px;
  }

  .calendar-grid {
    gap: 3px;
  }

  .calendar-day {
    padding: 2px;
  }
}
</style>
